<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"  %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"  %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>倍至综合管理平台</title>
	<!-- 引入公用Js与Css -->
	<%@include file="/view/common/resource.jsp" %>
	
    <link href="<%=basePath%>/css/font-awesome.min.css" rel="stylesheet">
    <link href="<%=basePath%>/css/style.css?v=4.1.0" rel="stylesheet">
</head>

<body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">
    <div id="wrapper">
        <!--左侧导航开始-->
        <nav class="navbar-default navbar-static-side" role="navigation">
            <div class="nav-close"><i class="fa fa-times-circle"></i>
            </div>
            <div class="sidebar-collapse">
                <ul class="nav" id="side-menu">
                    <li class="nav-header">
                        <div class="dropdown profile-element">
                            <span><img id="headImg" alt="image" class="img-circle height-64"
                            <c:choose>
                            	<c:when test="${operator != null && operator.member != null && operator.member.memHeadimgUrl != null }">
                            		src="${operator.member.memHeadimgUrl }"
                            	</c:when>
                            	<c:otherwise>
                            		src="<%=basePath%>/images/default_hd.png" 
                            	</c:otherwise>
                            </c:choose> 
                            /></span>
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <span class="clear">
                                <span class="block m-t-xs"><strong class="font-bold">
                                	${operator.member.memName }
                                	<c:if test="${not empty operator.member.memTrueName }">
                                		(${operator.member.memTrueName })
                                	</c:if>
                                </strong></span>
                                <span class="text-muted text-xs block">
                                <c:if test="${not empty operator.member.roleList }">
                                	${operator.member.roleList[0].roleName }
                                </c:if>
                                <b class="caret"></b></span>
                                </span>
                            </a>
                            <ul class="dropdown-menu animated fadeInRight m-t-xs">
                                <li><a id="changeHeaderImg"  href="javascript:void(0);">修改头像</a>
                                </li>
                                <li><a id="changePwd" class="J_menuItem" href="javascript:void(0);">修改密码</a>
                                </li>
                                <li><a id="selfInfo" class="J_menuItem" href="javascript:void(0);">个人资料</a>
                                </li>
                                <li class="divider"></li>
                                <li><a href="<%=basePath%>/logout">安全退出</a>
                                </li>
                            </ul>
                        </div>
                        <div class="logo-element">倍至<br/>关怀
                        </div>
                    </li>
                    <c:forEach var="item" items="${operator.member.menuList}">
                    <li>
                        <a href="#">
                            <i class="fa ${item.menuImg }"></i>
                            <span class="nav-label">${item.menuName}</span>
                            <span class="fa arrow icon-angle-left"></span>
                        </a>
                        <ul class="nav nav-second-level">
	                        <c:forEach var="node" items="${item.childMenuList}">
                            <li>
                                <a class="J_menuItem" href="${node.menuUrl}">
                                	<i class="fa ${node.menuImg }"></i>
                                	${node.menuName}
                                </a>
                            </li>
	                        </c:forEach>
                        </ul>
                    </li>
                    </c:forEach>

                </ul>
            </div>
        </nav>
        <!--左侧导航结束-->
        <!--右侧部分开始-->
        <div id="page-wrapper" class="gray-bg dashbard-1">
            <div class="row border-bottom">
                <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                    <div class="navbar-header">
                    	<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-paper-plane-o"></i> 小狼科技</a>
                    </div>
                    <ul class="nav navbar-top-links navbar-right">
                        <li class="dropdown">
                            <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
                                <i class="fa fa-comment"></i> <span class="label label-primary">${unreadCount+replyUnreadCount}</span>
                            </a>
                            <ul class="dropdown-menu dropdown-alerts">
                                <li>
                                    <a class="J_menuItem" href="<%=basePath%>/business/message/list?messageType=1" data-index="7">
                                        <div>
                                            <i class="fa fa-envelope fa-fw"></i>您有${unreadCount}条未读消息
                                            <!-- <span class="pull-right text-muted small">4分钟前</span> -->
                                        </div>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a class="J_menuItem" href="<%=basePath%>/business/message/list?status=4" data-index="7">
                                        <div>
                                            <i class="fa fa-qq fa-fw"></i> ${replyUnreadCount}条新回复
                                           <!--  <span class="pull-right text-muted small">12分钟钱</span> -->
                                        </div>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <div class="text-center link-block">
                                        <a class="J_menuItem" href="<%=basePath%>/business/message/list" data-index="7">
                                            <strong>查看所有 </strong>
                                            <i class="fa fa-angle-right"></i>
                                        </a>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown hidden-xs">
                            <a class="right-sidebar-toggle" aria-expanded="false">
                                <i class="fa fa-tasks"></i> 主题
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="row content-tabs">
                <button class="roll-nav roll-left J_tabLeft"><i class="fa fa-backward"></i>
                </button>
                <nav class="page-tabs J_menuTabs">
                    <div class="page-tabs-content">
                        <a href="javascript:;" class="active J_menuTab" data-id="defaultIndex">平台总览</a>
                    </div>
                </nav>
                <button class="roll-nav roll-right J_tabRight"><i class="fa fa-forward"></i>
                </button>
                <div class="btn-group roll-nav roll-right">
                    <button class="dropdown J_tabClose" data-toggle="dropdown">关闭操作<span class="caret"></span>

                    </button>
                    <ul role="menu" class="dropdown-menu dropdown-menu-right">
                        <li class="J_tabCloseAll"><a>关闭全部选项卡</a>
                        </li>
                        <li class="J_tabCloseOther"><a>关闭其他选项卡</a>
                        </li>
                    </ul>
                </div>
                <a href="<%=basePath%>/logout" class="roll-nav roll-right J_tabExit"><i class="fa fa fa-sign-out"></i> 退出</a>
            </div>
            <div class="row J_mainContent" id="content-main">
               <iframe class="J_iframe" name="iframe0" width="100%" height="100%" frameborder="0" data-id="defaultIndex" src="<%=basePath%>/overview" seamless></iframe>
            </div>
            <div class="footer">
                <div class="pull-right">&copy; 2016.编码小二</div>
            </div>
        </div>
        <!--右侧部分结束-->
        <!--右侧边栏开始-->
        <div id="right-sidebar">
            <div class="sidebar-container">


                <div class="tab-content">
                    <div id="tab-1" class="tab-pane active">
                        <div class="sidebar-title">
                            <h3> <i class="fa fa-comments-o"></i> 主题设置</h3>
                            <small><i class="fa fa-tim"></i> 你可以从这里选择和预览主题的布局和样式，这些设置会被保存在本地，下次打开的时候会直接应用这些设置。</small>
                        </div>
                        <div class="skin-setttings">
                            <div class="title">主题设置</div>
                            <div class="setings-item">
                                <span>收起左侧菜单</span>
                                <div class="switch">
                                    <div class="onoffswitch">
                                        <input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="collapsemenu">
                                        <label class="onoffswitch-label" for="collapsemenu">
                                            <span class="onoffswitch-inner"></span>
                                            <span class="onoffswitch-switch"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="setings-item">
                                <span>固定顶部</span>

                                <div class="switch">
                                    <div class="onoffswitch">
                                        <input type="checkbox" name="fixednavbar" class="onoffswitch-checkbox" id="fixednavbar">
                                        <label class="onoffswitch-label" for="fixednavbar">
                                            <span class="onoffswitch-inner"></span>
                                            <span class="onoffswitch-switch"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="setings-item">
                                <span>固定宽度</span>
                                <div class="switch">
                                    <div class="onoffswitch">
                                        <input type="checkbox" name="boxedlayout" class="onoffswitch-checkbox" id="boxedlayout">
                                        <label class="onoffswitch-label" for="boxedlayout">
                                            <span class="onoffswitch-inner"></span>
                                            <span class="onoffswitch-switch"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="title">皮肤选择</div>
                            <div class="setings-item default-skin nb">
                                <span class="skin-name ">
									 <a href="#" class="s-skin-0">
										 默认皮肤
									 </a>
								</span>
                            </div>
                            <div class="setings-item blue-skin nb">
                                <span class="skin-name ">
									<a href="#" class="s-skin-1">
										蓝色主题
									</a>
								</span>
                            </div>
                            <div class="setings-item yellow-skin nb">
                                <span class="skin-name ">
									<a href="#" class="s-skin-3">
										黄色/紫色主题
									</a>
								</span>
                            </div>
                             <div class="setings-item extend-skin4 nb">
                                <span class="skin-name ">
									<a href="#" class="s-skin-4">
										青色主题
									</a>
								</span>
                            </div>
                            <div class="setings-item extend-skin5 nb">
                                <span class="skin-name ">
									<a href="#" class="s-skin-5">
										灰色主题
									</a>
								</span>
                            </div>
                            <div class="setings-item extend-skin6 nb">
                                <span class="skin-name ">
									<a href="#" class="s-skin-6">
										绿色主题
									</a>
								</span>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
        <!--右侧边栏结束-->
    </div>
    <script type="text/javascript" src="<%=basePath%>/js/plugins/jquery.metisMenu.js"></script>
    <script type="text/javascript" src="<%=basePath%>/js/plugins/jquery.slimscroll.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>/js/extends/main_theme.js"></script>
    <script type="text/javascript" src="<%=basePath%>/js/plugins/hplus.min.js?v=4.1.0"></script>
    <script type="text/javascript" src="<%=basePath%>/js/plugins/contabs.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>/js/plugins/pace/pace.min.js"></script>

	<script type="text/javascript">
	$(function(){
	    	if('${mainTheme.collapsemenuValue}'==1){
	    		$("#collapsemenu").attr("checked", true);
	    		collapsemenu_();
	    	}
	    	if('${mainTheme.fixednavbarValue}'==1){
	    		$("#fixednavbar").attr("checked", true);
	    		fixednavbar_();
	    	}
	    	if('${mainTheme.boxedlayoutValue}'==1){
	    		$("#boxedlayout").attr("checked", true);
	    		boxedlayout_();
	    	}
	    	if('${mainTheme.skinValue}'==1){
	    		s_skin_1();
	    	}else if('${mainTheme.skinValue}'==3){
	    		s_skin_3();
	    	}else if('${mainTheme.skinValue}'==4){
	    		s_skin_4();
	    	}else if('${mainTheme.skinValue}'==5){
	    		s_skin_5();
	    	}else if('${mainTheme.skinValue}'==6){
	    		s_skin_6();
	    	}
	    });
	</script>
	<script type="text/javascript">
	$(function(){
		// 隐藏箭头变换
		$(".navbar-header").find('a').click(function(){
			if ($(this).find('i').hasClass('icon-indent-left')) {
				 $(this).find('i').removeClass('icon-indent-left');
				 $(this).find('i').addClass('icon-indent-right');
			} else {
				 $(this).find('i').removeClass('icon-indent-right');
				 $(this).find('i').addClass('icon-indent-left');
			}
		});
		// 我的头像
		$("#changeHeaderImg").click(function(){
			layer.open({
			      type: 1,
			      title: '修改头像',
			      shade: 0.5,
			      maxmin: true, //开启最大化最小化按钮
			      area: ['500px', '400px'],
			      skin: 'layui-layer-rim', //加上边框
			      content: $('#changHeaderDiv')
		 	});
		});
		
		//0.初始化fileinput
	    var oFileInput = new FileInput();
	    oFileInput.Init("files", path + "/file/upload");
	});
	
	var FileInput = function () {
		var oFile = new Object();
		//初始化fileinput控件（第一次初始化）
		oFile.Init = function(ctrlName, uploadUrl) {
			var control = $('#' + ctrlName);
			//初始化上传控件的样式
			control.fileinput({
				language: 'zh', //设置语言
				uploadUrl: uploadUrl, //上传的地址
				allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
				showUpload: true, //是否显示上传按钮
				showCaption: false,//是否显示标题
				browseClass: "btn btn-primary", //按钮样式	 
				//dropZoneEnabled: false,//是否显示拖拽区域
				//minImageWidth: 50, //图片的最小宽度
				//minImageHeight: 50,//图片的最小高度
				//maxImageWidth: 200,//图片的最大宽度
				//maxImageHeight: 200,//图片的最大高度
				//maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
				//minFileCount: 0,
				maxFileCount: 1, //表示允许同时上传的最大文件个数
				enctype: 'multipart/form-data',
				validateInitialCount:true,
				previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
				msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
			});
			//导入文件上传完成之后的事件
			$("#files").on("fileuploaded", function (event, data, previewId, index) {
				if (data == undefined || data == null || data == '') {
					layer.msg("头像上传失败");
					return;
				}
				//成功，替换头像
				$("#headImg").attr("src",data.response.netUrl);
				//获取窗口索引并关闭
            	parent.layer.closeAll();
				$.post(path +"/sys/member/saveInfoSetting",{memHeadimgUrl:data.response.netUrl},function(data){
					// do nothing
				});
			});
		}
		return oFile;
	};
	</script>
	
	<div id="changHeaderDiv" class="clearfix mt10 mr10 ml10" style="display:none">
		<div class="modal-body">
			<input type="file" name="files" id="files" class="file-loading" />
		</div>
	</div>
</body>
</html>
